<template>
    <dv-border-box-13>

        <div class="dotted">

            <div class="com-dotted" ref="dotted_ref">
                <div style="text-align: center;margin-top: 10px;

    font-size: 16px;
            ">
                    <img src="../../assets/img/titles/zuo.png" alt="">
                    <span style="color: aqua;">设备信息</span>
                    <img src="../../assets/img/titles/you.png" alt="">
                </div>
                <div class="succss">
                    <div class="information">
                        <div class="content">
                            <div class="text">
                                <span   style="color:#1296db">设备ID</span>
                                <span> {{ LIST.length != 0 ? LIST[0].deviceId : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <div class="text">
                                <span  style="color:#1296db">设备名称</span>
                                <span> {{ LIST.length != 0 ? LIST[0].deviceName : '--' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/大气压.png" alt="" class="icon">
                            <div class="text">
                                <span  >大气压</span>
                                <span> {{ LIST.length != 0 ? LIST[0].daqiya : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/TSP.png" alt="" class="icon">
                            <div class="text">
                                <span  >TSP</span>
                                <span> {{ LIST.length != 0 ? LIST[0].tsp : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/湿度.png" alt="" class="icon">
                            <div class="text">
                                <span  >湿度</span>
                                <span> {{ LIST.length != 0 ? LIST[0].shidu : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/温度.png" alt="" class="icon">
                            <div class="text">
                                <span  >温度</span>
                                <span> {{ LIST.length != 0 ? LIST[0].wendu : '--' }}</span>
                            </div>
                        </div>
                    </div> -->

                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/pm2.5.png" alt="" class="icon">
                            <div class="text">
                                <span  >PM2.5</span>
                                <span> {{ LIST.length != 0 ? LIST[0].pmTwoFive : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/pm10.png" alt="" class="icon">
                            <div class="text">
                                <span  >PM10</span>
                                <span> {{ LIST.length != 0 ? LIST[0].pmTen : '--' }}</span>
                            </div>
                        </div>
                    </div>


                    <!-- <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/风速.png" alt="" class="icon">
                            <div class="text">
                                <span  >风速</span>
                                <span> {{ LIST.length != 0 ? LIST[0].fengsu : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/风向.png" alt="" class="icon">
                            <div class="text">
                                <span  >风向</span>
                                <span> {{ LIST.length != 0 ? LIST[0].fengxiang : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/噪音.png" alt="" class="icon">
                            <div class="text">
                                <span  >噪声</span>
                                <span> {{ LIST.length != 0 ? LIST[0].zaosheng : '--' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <div class="content">
                            <img src="../../assets/iconfont/风力.png" alt="" class="icon">
                            <div class="text">
                                <span  >风力</span>
                                <span> {{ LIST.length != 0 ? LIST[0].fengli : '--' }}</span>
                            </div>
                        </div>
                    </div> -->

                </div>



            </div>


        </div>
    </dv-border-box-13>
</template>

<script>
import EventBus from '../../utils/map/click';
export default {
    props: {
        LIST: {
            type: Array,
            default: () => []
        }
    },
    created() {
        EventBus.$on('marker', (params) => {
            this.Dpdata = [params]
            console.log(this.Dpdata)
        })
    },
    data() {
        return {
            list: [],
            Dpdata: []
        }
    },
    watch: {
        LIST() {
            this.$nextTick(() => {
                this.list = [this.LIST][0]
            })
        }
    },
    methods: {
        // async InforMation(deviceId,Dpdata) {
        //     const specificInformation = await listUser()
        //     this.Dpdata=[Dpdata]
        //     this.list = specificInformation.rows.find(item => item.deviceId == deviceId) ? [specificInformation.rows.find(item => item.deviceId == deviceId)] : []
        //     //   (this.list)
        // }

    }
    // ,beforeDestroy(){
    //     EventBus.$off('DPdata')
    // }
}
</script>

<style scoped lang="scss">
.dotted {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    color: #fff;
    position: relative;
}

.com-dotted {

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.succss {
    img {
        width: 30px;
        height: 30px;
    }

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}



.information {
    display: flex;
    flex-basis: 50%;
    justify-content: center;
    align-items: center;
    margin-top: 12px;

    .text {
        font-size: 14px;
        text-align: center;
        width: 120px;

        overflow: hidden;
    }
}

.information .content {
    display: flex;
    align-items: center;
    width: 120px;
    overflow: hidden;

}
</style>
